<template>
  <div class="coreTechnology-mobile">
    <div class="coreTechnology-mobile-banner">
      <div class="coreTechnology-mobile-banner-img"
        ><img src="https://static.pdwl.net/jituan/images/mobile/coreTechnology/banner.png" alt=""
      /></div>
    </div>
    <div class="coreTechnology-mobile-core">
      <div class="coreTechnology-mobile-title">
        <h3>三大核心能力</h3>
        <p>赋能业务场景</p>
      </div>
      <div class="coreTechnology-mobile-core-body">
      <div class="swiper-container coreTechnology-mobile-core-body-box">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide flex_cen coreTechnology-mobile-core-body-item"
            v-for="(item, idx) in coreArr"
            :key="idx"
          >
            <div class="coreTechnology-mobile-core-body-item-img">
              <img :src="item.src" alt="" />
              <p>{{ item.title }}</p>
              <ul>
                <li
                  v-for="(subItem, subIdx) in item.subTitle"
                  :key="idx + 'a' + subIdx"
                  ><span>{{ subItem }}</span></li
                >
              </ul>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="coreTechnology-mobile-technology">
      <div class="coreTechnology-mobile-title">
        <h3>技术实力</h3>
        <p>引领科技创新，让创新更有保障</p>
      </div>
      <div class="coreTechnology-mobile-technology-body">
      <div class="swiper-container coreTechnology-mobile-technology-body-box">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide flex_cen coreTechnology-mobile-technology-body-item"
            v-for="(item, idx) in technologyArr"
            :key="idx"
          >
            <div class="coreTechnology-mobile-technology-body-item-img" :style="{background:item.bg}">
              <i :class="['iconfont',item.icon]"></i>
              <h5>{{ item.title }}</h5>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Footer from '@/components/footer/index.vue';
export default {
  components: { Footer },
  data() {
    return {
      coreArr: [
        {
          title: '基于注意力机制的视频理解与生成',
          src: 'https://static.pdwl.net/jituan/images/mobile/coreTechnology/core_1.png',
          subTitle: [
            '注意力机制',
            '知识图谱',
            '语义算法理解',
            '视频分类/检测技术',
            '视频生成模型',
          ],
        },
        {
          title: '基于大模型的智能内容生产',
          src: 'https://static.pdwl.net/jituan/images/mobile/coreTechnology/core_2.png',
          subTitle: ['LLM', '多模态处理', '语义理解', '强化学习', '对话系统'],
        },
        {
          title: '基于上下文内容的数字人生成',
          src: 'https://static.pdwl.net/jituan/images/mobile/coreTechnology/core_3.png',
          subTitle: [
            '形象建模',
            '实时渲染-离线渲染',
            '动作驱动',
            '表情驱动',
            '语音识别+语音合成',
          ],
        },
      ],
      technologyArr:[
        {
            title:"阵容硬核的研发团队",icon:"icon-a-ziyuan146",desc:"国际知名企业科学家担任首席技术顾问，吸纳汇聚高精尖人才，持续引领技术创新，致力于打造技术层面的核心竞争力。拥有一支技术实力强劲、经验丰富的技术团队，不断吸纳前沿的技术理念和全新思维。",bg:"linear-gradient(90deg, #501375 0%, #AA1F7C 100%)"
        },
        {
            title:"稳定可控的核心技术",icon:"icon-wendingxingqiang",desc:"始终将技术创新作为企业发展的核心驱动力，经过多年的技术沉淀和积累，已经形成了完整的、自主可控的技术体系。科技技术创新，拥有多项知识产权，目前已获得发明专和软件著作权40余项。",bg:"linear-gradient(90deg, #2A1973 0%, #3D51E3 100%)"
        },
        {
            title:"可信可靠的产品服务",icon:"icon-zhenshikekao",desc:"品达集团始终秉持着合作共赢、诚信为先的合作理念，服务近10万+企业，全国2000+深度合作商，以95%以上客户满意度，良心口碑，立足业界。拥有稳定可控的产品设计、生产和质量体系。",bg:"linear-gradient(90deg, #4F1D90 0%, #8427C1 100%) "
        },
      ]
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper('.swiper-container', {
        autoplay: {
          delay: 3000, //时间 毫秒
          disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.content-case-study-data-next',
          prevEl: '.content-case-study-data-prev',
        },
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: false,
        loop: true,
        grabCursor: true,
      });
    },
    openInfoDialog() {
      this.$router.push({name:"formPage"})
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.coreTechnology-mobile {
  overflow: hidden;
  &-title {
    text-align: center;
    padding: 80px 0 60px 0;
    margin: 0 auto;
    h3 {
      font-size: 46px;
      font-weight: bold;
      color: #000000;
      line-height: 50px;
    }
    p {
      margin-top: 40px;
      height: 18px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    &.dark {
      h3,
      p {
        color: #ffffff;
      }
    }
  }
  &-banner {
    position: relative;
    &-img {
      img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
      }
    }
    &-info {
      width: 70%;
      position: absolute;
      left: 20px;
      top: 22%;
      z-index: 1;
      color: #ffffff;
      &-desc {
        h2 {
          font-size: 50px;
          font-weight: bold;
          line-height: 54px;
        }
        p {
          margin-top: 30px;
          span {
            display: block;
            font-size: 30px;
            line-height: 60px;
            &:first-child {
              font-size: 40px;
            }
          }
        }
      }
      &-btn {
        margin-top: 50px;
      }
    }
  }
  &-core {
    .coreTechnology-mobile-title {
      background-image: url(https://static.pdwl.net/jituan/images/mobile/title_bg.png);
      background-size: 100% auto;
    }
    &-body {
      background-image: url(https://static.pdwl.net/jituan/images/mobile/core_bg.png);
      background-size: 100% auto;
      background-position: left bottom;
      padding-bottom:150px;
      &-box{
        margin: 0 60px;
      }
      &-item {
        &-img {
          text-align: center;
        }
      }
      img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }
      p {
        margin: 40px 0;
        font-size: 32px;
        color: #000000;
      }
      ul {
        li {
          margin: 10px 0;
          span {
            padding: 20px;
            line-height: 30px;
            background: linear-gradient(140deg, #006af3 0%, #62dea6 100%);
            border-radius: 6px;
            font-size: 28px;
            color: #ffffff;
            display: inline-block;
            width: 300px;
          }
        }
      }
    }
  }
  &-technology {
margin-top:-150px;
margin-bottom:80px;
    &-body {
      background-image: url(https://static.pdwl.net/jituan/images/mobile/coreTechnology/technology_bg.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      &-box{
        margin: 0 60px;
      }
      &-item {
        margin-top:100px;
        &-img {
          border-radius: 10px;
          color: #ffffff;
          padding:40px;
          i{
            font-size:60px;
          }
          h5{
            font-size:32px;
            margin-top:40px;
          }
          p{
            margin-top:30px;
            font-size:24px;
            line-height:36px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.coreTechnology-mobile {
  .vs-button {
    background: linear-gradient(90deg, #006fff 0%, #60dca7 100%);
    font-size: 24px;
    padding: 0;
    width: 200px;
    margin: 0px;
    border-radius: 8px;
  }
}
</style>
